<template>
  <div class="box" ref="line">charts</div>
</template>

<script>
import * as echarts from "echarts";
console.log(echarts);
export default {
  name: "LineCharts",
  mounted() {
    let myCharts = echarts.init(this.$refs.line);
    let option = {
      // title:{
      //     text:'haha'
      // },
      xAxis: {
        type: "category",
        boundaryGap: false,
        show: false,
      },
      grid: {
        left: 0,
        right: 0,
      },
      yAxis: {
        show: false,
      },
      series: {
        color: "hotpink",
        smooth: true,
        type: "line",
        symbol: "none",
        data: [11, 9, 20, 57, 32, 82, 99, 19, 22],
        areaStyle: {
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "white", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "black", // 100% 处的颜色
              },
            ],
            global: false, // 缺省为 false
          },
        },
      },
    };
    myCharts.setOption(option);
    window.onresize = function(){
      myCharts.resize()
    }
  },
};
</script>

<style>
.box {
  width: 100%;
  height: 100%;
}
</style>